<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户仪表板 - Spring MVC MySQL 示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #858796;
            --success-color: #1cc88a;
            --info-color: #36b9cc;
            --warning-color: #f6c23e;
            --danger-color: #e74a3b;
            --light-color: #f8f9fc;
            --dark-color: #5a5c69;
        }

        body {
            background-color: #f8f9fc;
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .sidebar {
            min-height: 100vh;
            background: linear-gradient(180deg, var(--primary-color) 10%, #224abe 100%);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        .sidebar .nav-item {
            margin-bottom: 0.25rem;
        }

        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.8);
            padding: 1rem;
            font-weight: 500;
        }

        .sidebar .nav-link:hover {
            color: #fff;
        }

        .sidebar .nav-link.active {
            color: #fff;
            font-weight: 700;
        }

        .sidebar .nav-link i {
            margin-right: 0.5rem;
        }

        .topbar {
            height: 4.375rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            background: #fff;
        }

        .card {
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            border: none;
            margin-bottom: 1.5rem;
        }

        .card-header {
            background-color: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
            font-weight: 700;
            color: var(--dark-color);
        }

        .stat-card {
            border-left: 4px solid;
            border-radius: 0.35rem;
        }

        .stat-card.primary {
            border-left-color: var(--primary-color);
        }

        .stat-card.success {
            border-left-color: var(--success-color);
        }

        .stat-card.info {
            border-left-color: var(--info-color);
        }

        .stat-card.warning {
            border-left-color: var(--warning-color);
        }

        .stat-card .text-xs {
            font-size: 0.8rem;
        }

        .stat-card .h5 {
            font-weight: 700;
            color: var(--dark-color);
        }

        .user-profile-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.3);
        }

        .content-header {
            padding: 0.75rem 1.5rem;
            background-color: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
        }

        .chart-container {
            position: relative;
            height: 20rem;
        }

        .bg-gradient-primary {
            background: linear-gradient(180deg, var(--primary-color) 10%, #224abe 100%);
        }

        .dropdown-menu {
            border: none;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.3);
        }

        .dropdown-item {
            padding: 0.5rem 1.5rem;
        }

        .dropdown-item i {
            margin-right: 0.5rem;
            color: var(--secondary-color);
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3 col-lg-2 sidebar px-0">
                <div class="text-center p-4">
                    <h4 class="text-white">Spring MVC Demo</h4>
                    <hr class="bg-light">
                </div>

                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <i class="bi bi-speedometer2"></i>
                            仪表板
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-people"></i>
                            用户管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-file-earmark-text"></i>
                            内容管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-bar-chart"></i>
                            统计分析
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-gear"></i>
                            系统设置
                        </a>
                    </li>
                    <li class="nav-item mt-4">
                        <a class="nav-link" href="${pageContext.request.contextPath}/logout">
                            <i class="bi bi-box-arrow-right"></i>
                            退出登录
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 主内容区域 -->
            <div class="col-md-9 col-lg-10 ml-sm-auto px-0">
                <!-- 顶部导航栏 -->
                <div class="topbar mb-4">
                    <div class="container-fluid d-flex justify-content-between align-items-center h-100">
                        <h1 class="h3 mb-0 text-gray-800">仪表板</h1>

                        <div class="dropdown">
                            <button class="btn btn-link dropdown-toggle d-flex align-items-center" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <img src="https://ui-avatars.com/api/?name=${user.username}&background=4e73df&color=ffffff" class="user-profile-img me-2">
                                <span class="d-none d-lg-inline text-gray-600 small">${user.username}</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end shadow animated--grow-in" aria-labelledby="userDropdown">
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <i class="bi bi-person fs-6"></i>
                                        个人信息
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <i class="bi bi-gear fs-6"></i>
                                        账户设置
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <i class="bi bi-list-check fs-6"></i>
                                        活动日志
                                    </a>
                                </li>
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                                        <i class="bi bi-box-arrow-right fs-6"></i>
                                        退出登录
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 内容区域 -->
                <div class="container-fluid">
                    <!-- 欢迎信息 -->
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">欢迎回来, ${user.username}!</h1>
                        <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
                            <i class="bi bi-plus-circle-fill text-white-50 me-1"></i> 创建新内容
                        </a>
                    </div>

                    <!-- 统计卡片 -->
                    <div class="row">
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card stat-card primary h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                总用户数</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">1,258</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="bi bi-people-fill fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card stat-card success h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                                今日收入</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">¥5,238</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="bi bi-currency-yen fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card stat-card info h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                                待处理任务</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="bi bi-list-task fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card stat-card warning h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                                系统请求数</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">9,852</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="bi bi-server fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 内容区域 -->
                    <div class="row">
                        <!-- 图表区域 -->
                        <div class="col-xl-8 col-lg-7">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h6 class="m-0 font-weight-bold text-primary">收入概览</h6>
                                    <div class="dropdown no-arrow">
                                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="bi bi-three-dots-vertical text-gray-400"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                                            <div class="dropdown-header">操作:</div>
                                            <a class="dropdown-item" href="#">导出数据</a>
                                            <a class="dropdown-item" href="#">打印图表</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">刷新数据</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container">
                                        <!-- 这里可以放置图表 -->
                                        <div class="d-flex align-items-center justify-content-center h-100">
                                            <div class="text-center">
                                                <i class="bi bi-bar-chart-fill display-4 text-gray-300"></i>
                                                <p class="mt-2 text-gray-500">收入图表将在这里显示</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 最近活动 -->
                        <div class="col-xl-4 col-lg-5">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">最近活动</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mt-2">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="bg-gradient-primary rounded-circle p-2 me-3">
                                                <i class="bi bi-person-plus text-white"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="small text-gray-500">2023-05-15, 14:32</div>
                                                <span class="fw-semibold">新用户注册</span> - 用户 "john_doe" 刚刚注册
                                            </div>
                                        </div>

                                        <div class="d-flex align-items-center mb-3">
                                            <div class="bg-gradient-success rounded-circle p-2 me-3">
                                                <i class="bi bi-currency-yen text-white"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="small text-gray-500">2023-05-15, 12:17</div>
                                                <span class="fw-semibold">新订单</span> - 收到金额 ¥1,250 的新订单
                                            </div>
                                        </div>

                                        <div class="d-flex align-items-center mb-3">
                                            <div class="bg-gradient-info rounded-circle p-2 me-3">
                                                <i class="bi bi-chat-dots text-white"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="small text-gray-500">2023-05-15, 11:48</div>
                                                <span class="fw-semibold">新消息</span> - 收到来自用户 "sarah_k" 的新消息
                                            </div>
                                        </div>

                                        <div class="d-flex align-items-center mb-3">
                                            <div class="bg-gradient-warning rounded-circle p-2 me-3">
                                                <i class="bi bi-exclamation-triangle text-white"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="small text-gray-500">2023-05-15, 09:51</div>
                                                <span class="fw-semibold">系统警告</span> - 数据库连接数接近上限
                                            </div>
                                        </div>

                                        <div class="text-center mt-3">
                                            <a class="btn btn-sm btn-outline-primary" href="#">查看所有活动</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 用户信息卡片 -->
                    <div class="row">
                        <div class="col-lg-6 mb-4">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">个人信息</h6>
                                </div>
                                <div class="card-body">
                                    <div class="text-center">
                                        <img class="img-fluid px-3 px-sm-4 mt-3 mb-4" style="width: 15rem;" src="https://ui-avatars.com/api/?name=${user.username}&background=4e73df&color=ffffff&size=256" alt="用户头像">
                                    </div>
                                    <table class="table table-borderless">
                                        <tr>
                                            <th width="30%">用户名:</th>
                                            <td>${user.username}</td>
                                        </tr>
                                        <tr>
                                            <th>邮箱:</th>
                                            <td>${user.email}</td>
                                        </tr>
                                        <tr>
                                            <th>注册时间:</th>
                                            <td>
                                                <fmt:formatDate value="${user.createdAt}" pattern="yyyy-MM-dd HH:mm:ss" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>状态:</th>
                                            <td><span class="badge bg-success">活跃</span></td>
                                        </tr>
                                    </table>
                                    <a href="#" class="btn btn-primary btn-block">编辑个人信息</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 mb-4">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">项目进度</h6>
                                </div>
                                <div class="card-body">
                                    <h4 class="small font-weight-bold">服务器迁移 <span class="float-right">80%</span></h4>
                                    <div class="progress mb-4">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>

                                    <h4 class="small font-weight-bold">销售追踪 <span class="float-right">40%</span></h4>
                                    <div class="progress mb-4">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>

                                    <h4 class="small font-weight-bold">客户数据库 <span class="float-right">60%</span></h4>
                                    <div class="progress mb-4">
                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>

                                    <h4 class="small font-weight-bold">网站重新设计 <span class="float-right">30%</span></h4>
                                    <div class="progress mb-4">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>

                                    <h4 class="small font-weight-bold">移动应用开发 <span class="float-right">20%</span></h4>
                                    <div class="progress">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 页脚 -->
                <footer class="sticky-footer bg-white mt-5">
                    <div class="container my-auto">
                        <div class="copyright text-center my-auto">
                            <span>Copyright &copy; Spring MVC MySQL Demo 2023</span>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 侧边栏激活状态
            const currentPage = window.location.pathname;
            const navLinks = document.querySelectorAll('.nav-link');

            navLinks.forEach(link => {
                if (link.getAttribute('href') === currentPage) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            });

            // 用户下拉菜单
            const userDropdown = document.getElementById('userDropdown');
            if (userDropdown) {
                userDropdown.addEventListener('click', function(e) {
                    e.preventDefault();
                });
            }

            // 模拟数据更新时间
            setInterval(updateDataTime, 60000); // 每分钟更新一次

            function updateDataTime() {
                const now = new Date();
                const timeString = now.toLocaleTimeString();
                document.querySelectorAll('.data-time').forEach(el => {
                    el.textContent = `最后更新: ${timeString}`;
                });
            }
        });
    </script>
</body>
</html>